<template>
	<view class="pagebody">
		<view class="bgfff" style="border-radius: 0 0 16rpx 16rpx;">
			<view class="topbox">
				<TopSearch></TopSearch>
			</view>
			<view class="head">
				<view class="head_font">
					{{ classify==1?'日本看病指南':classify==2?'抗癌技术':'日本干细胞' }}
				</view>
				<view class="type_list">
					<view :class="item.dictValue == typeid ? 'type_card type_card2' : 'type_card'" v-for="(item,index) in medicalGuide" :key="index" @click="changeType(item.dictValue)">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>
		</view>
		<view class="news_list" v-if="typeid">
			<view class="list_head">
				<view class="head_font">
					推荐文章
				</view>
			</view>
			<view class="news_array">
				<view class="news_card" v-for="(item,index) in tjnewsList" :key="index" @click="tozndetail(item.id)">
					<view class="news_title">
						{{ item.title }}
					</view>
					<view class="news_content" v-html="transformContent(item.content)">
					</view>
					<view class="news_info">
						<view class="info_font">
							{{item.hits}}
						</view>
						<view class="info_font">
							{{ item.updateTime }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<consulting v-if="typeid"></consulting>
		<view class="news_list" style="border-radius: 16px  16px 0 0;">
			<view class="list_head">
				<view class="head_font">
					相关文章
				</view>
			</view>
			<view class="news_array">
				<view class="news_card" @click="tozndetail(item.id)" v-for="(item,index) in newsList" :key="index">
					<view class="news_title">
						{{ item.title }}
					</view>
					<view class="news_content" v-html="transformContent(item.content)">
					</view>
					<view class="news_info">
						<view class="info_font">
							推荐指数: {{item.hits}}
						</view>
						<view class="info_font">
							{{ item.updateTime }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pagebox">
			<!-- 统一分页器 -->
			<view class="thepager justify-between align-center">
				<view @click="tonewpage(1)" class="pagebtn" :class="page!=1?'havepage':''">
					上一页
				</view>
				<view class="pageNm">
					<span class="nowpage">{{page}}</span> <span style="margin: 0 8rpx;">/</span>{{pages}}
				</view>
				<view @click="tonewpage(2)" class="pagebtn" :class="page<pages?'havepage':''">
					下一页
				</view>
			</view>
		</view>
		<consulting></consulting>
		<HospitalList :hospitalList="hospitalList"></HospitalList>
		<consulting></consulting>
		<DoctorList :doctorlist="doctorlist"></DoctorList>
		<japanfw :type="1"></japanfw>
		<AdvCom :type='2'></AdvCom>
		<japanfw :type="2"></japanfw>
		<AdvCom :type='3'></AdvCom>
		<japanfw :type="3"></japanfw>
		<view class="news_list" v-if="typeid">
			<view class="list_head">
				<view class="head_font">
					相关文章
				</view>
			</view>
			<view class="news_array">
				<view class="news_card" @click="tozndetail(item.id)" v-for="(item,index) in xgnewsList" :key="index">
					<view class="news_title">
						{{ item.title }}
					</view>
					<view class="news_content" v-html="transformContent(item.content)">
					</view>
					<view class="news_info">
						<view class="info_font">
							推荐指数: {{item.hits}}
						</view>
						<view class="info_font">
							{{ item.updateTime }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<FixedFoot :typeid="3"></FixedFoot>
	</view>
</template>
<script>
	import NewslistCom from '../../components/generalcom/newslistcom.vue';
	import TopSearch from '../../layouts/topsearch.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import HospitalList from '../../components/generalcom/hospitallist.vue';
	import DoctorList from '../../components/generalcom/doctorlist.vue';
	import japanfw from '../../components/generalcom/japanfw.vue';
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import { getDicts,getJapanNews,getHospitalList,getDoctorList } from '@/api/api.js'
	import { getInfo } from '@/api/login'
	export default {
		components: {
			NewslistCom,
			TopSearch,
			consulting,
			HospitalList,
			DoctorList,
			japanfw,
			AdvCom,
			FixedFoot
		},
		onLoad(option) {
			console.log(option)
			this.classify = option.classify
			this.typeid = option.typeid
			this.getDicts()
			this.getJapanNews()
			this.getHospitalList(null)
			this.getDoctorList(null)
			if(this.typeid){
				this.gettjlist()
				this.getxglist()
			}
		},
		data() {
			return {
				medicalGuide:[],
				classify:1,
				typeid:'01',
				newsList:[],
				tjnewsList:[],
				xgnewsList:[],
				page: 1,
				pageSize: 6,
				total: 0,
				pages: 0,
				hospitalList: [],
				doctorlist: [],
			}
		},
		methods: {
			// 推荐文章
			gettjlist(){
				let params = {
						'state':'1',
						'label':3,
						'classify':this.classify,
						"pageNum": this.page,
						"pageSize": this.pageSize,
						'orderByColumn':'updateTime',
						'isAsc':'desc',
						'type':this.typeid
				}
				getJapanNews(params).then(res => {
					this.tjnewsList = res.rows
				})
			},
			getxglist(){
				let params = {
						'state':'1',
						'classify':this.classify,
						"pageNum": this.page,
						"pageSize": this.pageSize,
						'orderByColumn':'updateTime',
						'isAsc':'desc',
				}
				getJapanNews(params).then(res => {
					this.xgnewsList = res.rows
				})
			},
			tozndetail(id){
				uni.navigateTo({
					url: '/pages/serve/zndetail?id='+id
				});
			},
			// 统一分页器事件
			tonewpage(num) {
				if (num == 1) {
					if (this.page != 1) {
						this.page--
						this.getJapanNews();
						this.topPage();
					} else {
						return
					}
				} else {
					if (this.page < this.pages) {
						this.page++
						this.getJapanNews();
						this.topPage();
					} else {
						return
					}
				}
			},
			topPage() {
				uni.pageScrollTo({
					scrollTop: 0, 
					duration: 30 
				})
			},
			// 获取日本看病类型
			getDicts() {
				let dictstr = ""
				if(this.classify==1){
					dictstr = "medical_guide"
				}else if(this.classify==2){
					dictstr = "anticancer_technology"
				}else{
					dictstr = "stem_cells"
				}
				getDicts(dictstr).then(res => {
					this.medicalGuide = res.data
				});
			},
			// 查询指南首页文章列表
			getJapanNews() {
				let params = {
						'state':'1',
						'classify':this.classify,
						"pageNum": this.page,
						"pageSize": this.pageSize,
						'orderByColumn':'updateTime',
						'isAsc':'desc',
						'type':this.typeid
				}
				getJapanNews(params).then(res => {
					this.newsList = res.rows
					this.total = res.total
					this.pages = Math.ceil(this.total / this.pageSize)
				})
			},
			transformContent(content){
				content = content.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')  // 去除 script 标签及内容
						.replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')    // 去除 style 标签及内容
						.replace(/<img[^>]*>/gi, '')                          // 去除所有 <img> 标签
						.replace(/<\/?[^>]+(>|$)/g, '')                       // 去除其他所有 HTML 标签
						.trim();
						
				if(content.length < 30){
					return content;
				}else{
					return content.substring(0,30) + '...' + '<span style="color:#00977C">[ 详情 ]</span>'
				}
			},
			// 查询推荐医院
			getHospitalList(japanDisease) {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": japanDisease
				}
				getHospitalList(param).then(response => {
					this.hospitalList = response.rows
				})
			},
			getDoctorList(japanDisease) {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"japanDisease": japanDisease
				}
				getDoctorList(param).then(response => {
					this.doctorlist = response.rows
				})
			},
			changeType(changeType){
				uni.navigateTo({
					url: '/pages/serve/seeDoctorzn?classify='+this.classify+'&typeid='+changeType
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pagebody{
		padding-bottom: 136rpx;
		background: #F0F6F5;
		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}
		.head{
			padding: 24rpx;
			.head_font{
				font-weight: 500;
				font-size: 40rpx;
				font-weight: bold;
				color: #00977C;
				line-height: 40rpx;
			}
			.type_list{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.type_card{
					font-weight: bold;
					border-radius: 16rpx;
					border: 1rpx solid #D7DDDC;
					align-items: center;
					font-size: 36rpx;
					width: 339rpx;
					height: 80rpx;
					color: #303B39;
					line-height: 80rpx;
					text-align: center;
					margin-top: 30rpx;
				}
				.type_card2{
					background: #E5FBF7;
					border: 1rpx solid #E5FBF7;
					color: #00977C;
				}
			}
		}
		.news_list{
			margin-top: 16rpx;
			background-color: #FFFFFF;
			border-radius: 16px;
			.list_head{
				border-bottom: 1rpx solid #D7DDDC;
				.head_font{
					padding: 40rpx 0 6rpx 0;
					margin-left: 33rpx;
					font-weight: 600;
					font-size: 40rpx;
					color: #303B39;
					line-height: 40rpx;
					border-bottom: 10rpx solid #00D9B2;
					width: fit-content;
				}
			}
			.news_array{
				padding: 0 24rpx;
				.news_card{
					margin-top: 24rpx;
					padding-bottom: 32rpx;
					border-bottom: 1rpx dashed #D7DDDC;
					.news_title{
						font-weight: 600;
						font-size: 38rpx;
						color: #303B39;
						line-height: 56rpx;
						
						overflow:hidden;  //超出文本隐藏
						text-overflow:ellipsis;  ///超出部分省略号显示
						display:-webkit-box;  //弹性盒模型
						-webkit-box-orient:vertical;  //上下垂直
						-webkit-line-clamp:2;  //自定义行数
					}
					.news_content{
						font-weight: 500;
						font-size: 32rpx;
						color: #576260;
						line-height: 50rpx;
					}
					.news_info{
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
						.info_font{
							font-weight: 500;
							font-size: 24rpx;
							color: #7E8987;
						}
					}
				}
			}
		}
		.pagebox {
			background: #fff;
			padding: 32rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;
		
			// 统一分页器样式
			.thepager {
				.pagebtn {
					width: 178rpx;
					height: 76rpx;
					border: 1px solid #B8C3C1;
					text-align: center;
					line-height: 76rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #303B39;
					background: #fff;
					border-radius: 24rpx;
				}
		
				.havepage {
					color: #00D9B2 !important;
					border-color: #00D9B2 !important;
				}
		
				.pageNm {
					font-weight: 400;
					font-size: 32rpx;
					color: #7E8987;
		
					.nowpage {
						color: #303B39;
		
					}
				}
		
			}
		}
	}
</style>